<template>
  <div
    v-loading="loading || getSpareBomListLoading"
    class="good_detail"
    element-loading-text="加载中..."
  >
    <div class="header">
      <div class="title">产品详情</div>
      <div class="btn_group">
        <HButton @click="goback"> 返回 </HButton>
        <HPlainButton v-permission="'goods_update'" @click="editProduct">修改产品</HPlainButton>
        <HPlainButton v-permission="'goods_disabled'" type="error" @click="changeAll(1)">
          禁用
        </HPlainButton>
        <HPlainButton v-permission="'goods_delete'" type="error" @click="changeAll(2)">
          删除
        </HPlainButton>
        <HPlainButton
          v-if="getGoodType() === 'product'"
          v-permission="'goods_addBom'"
          @click="addBOM"
          >新增BOM关联
        </HPlainButton>
        <h-plain-button
          v-permission="'goods_serviceModality'"
          @click="serviceModalityConnectModalVisible = true"
          >关联服务形式</h-plain-button
        >
      </div>
    </div>
    <div class="line"></div>

    <body>
      <div class="sidebar">
        <div class="header">
          <el-form v-if="proInfo" label-width="80">
            <el-form-item label="产品型号">
              <h-tooltip-text
                font-weight="bold"
                :max-width="220"
                :height="19"
                :font-size="14"
                :text="proInfo?.model"
              />
            </el-form-item>
          </el-form>
        </div>
        <el-form label-width="90" class="form_list">
          <el-form-item v-if="proInfo" label="产品名称">
            <h-tooltip-text :max-width="220" :height="19" :text="proInfo?.name" />
          </el-form-item>
          <!-- <el-form-item v-if="proInfo && proInfo.department" label="所属部门">
            <h-tooltip-text
              :max-width="220"
              :height="19"
              :text="proInfo.department.map((item) => item.name).join('、')"
            />
          </el-form-item> -->
          <el-form-item label="产品类型">
            {{ getGoodType() === 'product' ? '成品' : '产品' }}
          </el-form-item>
          <!-- <el-form-item label="销售型号">
            {{ proInfo?.saleModels }}
          </el-form-item> -->
          <el-form-item label="产品品牌">
            <span>{{ proInfo?.brand }}</span>
          </el-form-item>
          <el-form-item label="产品分类">
            <span>{{
              [proInfo?.type, proInfo?.typeTwo, proInfo?.typeThree]
                .filter((item) => item !== null && item !== undefined && item)
                .join('-')
            }}</span>
          </el-form-item>
          <el-form-item label="产品货号">
            <span>{{ proInfo?.itemNumber }}</span>
          </el-form-item>
          <el-form-item label="产品编号">
            <span>{{ proInfo?.code }}</span>
          </el-form-item>
          <el-form-item label="产品单位">
            <span>{{ proInfo?.unit }}</span>
          </el-form-item>
          <!-- <el-form-item label="是否为核心件">
            <span>{{ proInfo?.coreMaterials ? '是' : '否' }}</span>
          </el-form-item>
          <el-form-item label="批号管理">
            <span>{{ proInfo?.enableBatchNo ? '启用' : '禁用' }}</span>
          </el-form-item> -->
          <el-form-item label="创建时间">
            <span>{{ proInfo?.createTime }}</span>
          </el-form-item>
          <el-form-item label="更新时间">
            <span>{{ proInfo?.updateTime }}</span>
          </el-form-item>
          <!-- <el-form-item label="蓝牙二维码">
            <div v-if="proInfo?.qrImage" class="img_list">
              <h-image
                :width="80"
                :height="50"
                :src="proInfo?.qrImage"
                :preview-src-list="[proInfo?.qrImage]"
                :show-del-btn="false"
              />
            </div>
            <span v-else>无</span>
          </el-form-item> -->
          <el-form-item label="产品图片">
            <div v-if="proInfo?.images.length > 0" class="img_list">
              <h-image
                v-for="(img, imgIndex) in proInfo?.images"
                :key="imgIndex"
                :width="80"
                :height="50"
                :src="img"
                :preview-src-list="proInfo?.images"
                :show-del-btn="false"
              />
            </div>
            <span v-else>无</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="line"></div>
      <div class="tabs">
        <div class="tabs_header">
          <div class="tabs_header_options" :style="tabsHeaderOptionsStyle">
            <el-tabs v-model="activeName" @tab-click="handleClick" @tab-change="handleTabsChange">
              <el-tab-pane label="产品规格" name="first" />
              <el-tab-pane label="BOM清单" name="second" />
              <el-tab-pane label="产品参数" name="third" />
              <!-- <el-tab-pane name="fourth" v-show="nodekey == '1'">
                <template #label>
                  <span class="custom-tabs-label">
                    <span>电子说明书({{ insList.length }})</span>
                  </span>
                </template>
</el-tab-pane>
<el-tab-pane name="fifth" v-show="nodekey == '1'">
  <template #label>
                  <span class="custom-tabs-label">
                    <span>在线视频({{ videoList.length }})</span>
                  </span>
                </template>
</el-tab-pane> -->
              <el-tab-pane label="产品介绍" name="sixth" />
            </el-tabs>
          </div>

          <!-- 产品规格搜索 -->
          <div v-show="activeName === 'first'" class="product_specification_search">
            <el-input
              v-model.trim="specName"
              clearable
              placeholder="搜索名称"
              @keyup.enter="getSpecData"
              @clear="getSpecData"
            />
            <el-input
              v-model.trim="specSKU"
              clearable
              placeholder="搜索SKU码"
              @keyup.enter="getSpecData"
              @clear="getSpecData"
            />
            <HButton type="primary" @click="getSpecData">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
          </div>

          <!-- 电子说明书 -->
          <div
            v-show="activeName === 'fourth' && getGoodType() === 'product'"
            class="electronic_manual"
          >
            <el-input
              v-model.trim="insName"
              clearable
              placeholder="搜索名称"
              @keyup.enter="getInsData"
              @clear="getInsData"
            />
            <HButton type="primary" @click="getInsData">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
          </div>

          <!-- 在线视频 -->
          <div v-show="activeName === 'fifth' && getGoodType() === 'product'" class="online_video">
            <el-input
              v-model.trim="videoName"
              clearable
              placeholder="搜索名称"
              @keyup.enter="geVideoData"
              @clear="geVideoData"
            />
            <HButton type="primary" @click="geVideoData">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
          </div>
        </div>
        <div class="tabs_content">
          <!-- 产品规格 -->
          <div v-show="activeName === 'first'" class="product_specification_table">
            <div class="table">
              <el-table :data="specList" :border="true" height="100%">
                <el-table-column
                  type="index"
                  :index="indexMethod"
                  label="序号"
                  width="50"
                  fixed="left"
                  :align="'center'"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="name"
                  label="规格名称"
                  min-width="120"
                />
                <el-table-column show-overflow-tooltip prop="code" label="SKU码" width="240" />
                <el-table-column label="移动端状态" width="85">
                  <template #default="{ row }">
                    {{ row.mobileVisible === 1 ? '显示' : '隐藏' }}
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  show-overflow-tooltip
                  prop="warrantyDay"
                  label="质保周期"
                  width="75"
                /> -->
                <el-table-column show-overflow-tooltip prop="price" label="单价" width="100">
                  <template #default="scope">
                    <span>￥{{ scope.row.price }}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column show-overflow-tooltip prop="overPrice" label="单价2" width="120">
                  <template #default="scope">
                    <span>￥{{ scope.row.overPrice }}</span>
                  </template>
                </el-table-column> -->
                <el-table-column show-overflow-tooltip prop="image" label="规格图片" width="100">
                  <template #default="scope">
                    <h-image
                      v-if="scope.row.image"
                      :src="scope.row.image || defaultImage"
                      :width="60"
                      :height="37.5"
                      :show-del-btn="false"
                      :show-mask="!!scope.row.image"
                      :padding="2"
                    />
                  </template>
                </el-table-column>

                <!-- 规格状态 -->
                <el-table-column
                  fixed="right"
                  :align="'center'"
                  prop="enabled"
                  label="规格状态"
                  width="80"
                >
                  <template #default="scope">
                    <div style="display: flex; justify-content: center">
                      <HStatus :class="scope.row.enabled == true ? 'primary' : 'info'">
                        {{ scope.row.enabled == true ? '启用' : '禁用' }}
                      </HStatus>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="pagination">
              <Pagination
                ref="specPage"
                :list_total="specTotal"
                @size-change="getSpecData"
                @current-change="getSpecData(false)"
              />
            </div>
          </div>

          <!-- BOM清单 -->
          <div v-show="activeName === 'second'" class="bom_list">
            <div class="table">
              <el-table :data="tableData" :border="true" height="100%">
                <el-table-column
                  type="index"
                  :index="indexMethod1"
                  label="序号"
                  width="50"
                  fixed="left"
                />
                <el-table-column prop="id" label="操作" width="100" fixed="right" :align="'center'">
                  <template #default="scope">
                    <h-link @click="viewBomDetal(scope.row.id)"> 详情 </h-link>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="name" label="产品名称" />
                <el-table-column show-overflow-tooltip prop="model" label="产品型号" />
                <el-table-column show-overflow-tooltip prop="type" label="产品类型" />
                <el-table-column show-overflow-tooltip prop="specName" label="产品规格" />
                <el-table-column show-overflow-tooltip prop="specCode" label="SKU条码" />
                <el-table-column show-overflow-tooltip prop="qty" label="子件数量" />
                <el-table-column show-overflow-tooltip prop="remark" label="备注" />
                <el-table-column prop="gmtCreate" label="创建时间" width="128" />
                <el-table-column prop="gmtUpdate" label="更新时间" width="128" />
              </el-table>
            </div>
          </div>

          <!-- 产品参数 -->
          <div v-show="activeName === 'third'" class="product_param">
            <div class="system_param">
              <span class="text">系统参数</span>
              <div class="table">
                <el-table :data="paramFields" :border="true" height="100%">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod2"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="参数名称" />
                  <el-table-column show-overflow-tooltip prop="val" label="参数值" width="500">
                    <template #default="scope">
                      <div v-if="scope.row.type === 5" class="files">
                        <h-image
                          v-for="item in scope.row.optVos"
                          :key="item.id"
                          :width="40"
                          :height="25"
                          :src="item.optValue"
                          :padding="2"
                          :preview-src-list="scope.row.optVos.map((item) => item.optValue)"
                          :show-del-btn="false"
                        />
                      </div>
                      <div v-else-if="scope.row.type === 6" class="files">
                        <h-image
                          v-for="(item, index) in scope.row.optVos"
                          :key="item.id"
                          :width="40"
                          :height="25"
                          :src="pdfImg"
                          :padding="2"
                          :is-show-img-preview="false"
                          :show-del-btn="false"
                          @preview="onShowPdfPreviewDialog(scope.row.optVos, index)"
                        />
                      </div>
                      <div v-else-if="scope.row.type === 7" class="files">
                        <h-image
                          v-for="(item, index) in scope.row.optVos"
                          :key="item.id"
                          :width="40"
                          :height="25"
                          :src="videoImg"
                          :padding="2"
                          :is-show-img-preview="false"
                          :show-del-btn="false"
                          @preview="onShowVideoPreviewDialog(scope.row.optVos, index)"
                        />
                      </div>
                      <template v-else>
                        {{ scope.row.optVos.map((o) => o.optValue).join('、') }}
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="custom_param">
              <span class="text">自定义参数</span>
              <div class="table">
                <el-table :data="customParams" :border="true" height="100%">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod3"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="参数名称" />
                  <el-table-column show-overflow-tooltip prop="val" label="参数值" />
                </el-table>
              </div>
            </div>
          </div>

          <!-- 电子说明书 -->
          <div
            v-show="activeName === 'fourth' && getGoodType() === 'product'"
            class="electronic_manual"
          >
            <div class="table">
              <el-table :data="insList" :border="true" height="100%">
                <el-table-column
                  show-overflow-tooltip
                  type="index"
                  :index="indexMethod4"
                  label="序号"
                  width="50"
                />
                <el-table-column show-overflow-tooltip prop="name" label="说明书名称" />
                <el-table-column show-overflow-tooltip prop="image" label="说明书图片">
                  <template #default="scope">
                    <el-popover placement="left" :width="200" trigger="hover">
                      <el-image
                        style="width: 100%; height: 120px"
                        :src="scope.row.image"
                        fit="contain"
                      >
                        <template #error>
                          <div class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <template #reference>
                        <el-icon size="20">
                          <Picture></Picture>
                        </el-icon>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination">
              <Pagination
                ref="insPage"
                :list_total="insTotal || 0"
                @size-change="getInsData"
                @current-change="getInsData(false)"
              />
            </div>
          </div>

          <!-- 在线视频 -->
          <div v-show="activeName === 'fifth' && getGoodType() === 'product'" class="online_video">
            <div class="table">
              <el-table :data="videoList" :border="true" height="100%">
                <el-table-column
                  show-overflow-tooltip
                  type="index"
                  :index="indexMethod5"
                  label="序号"
                  width="50"
                />
                <el-table-column show-overflow-tooltip prop="name" label="视频名称" />
                <el-table-column show-overflow-tooltip prop="image" label="视频图片">
                  <template #default="scope">
                    <el-popover placement="left" :width="200" trigger="hover">
                      <el-image
                        style="width: 100%; height: 120px"
                        :src="scope.row.image"
                        fit="contain"
                      >
                        <template #error>
                          <div class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <template #reference>
                        <el-icon size="20">
                          <Picture></Picture>
                        </el-icon>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination">
              <Pagination
                ref="videoPage"
                :list_total="videoTotal || 0"
                @size-change="geVideoData"
                @current-change="geVideoData(false)"
              />
            </div>
          </div>

          <div v-show="activeName === 'sixth'" class="product_desc">
            <Editor
              v-if="proContent != ''"
              ref="editorRef"
              :value="proContent"
              readonly
              :main-style="{ height: 'auto', overflow: 'auto' }"
            ></Editor>
            <el-empty v-else description="暂无介绍..." />
          </div>
        </div>
      </div>
    </body>

    <!-- 关联BOM弹窗 -->
    <h-drawer v-model="bomDialog" title="关联BOM" :width="80" :loading="bomLoading">
      <div class="connect_bom_modal">
        <div class="assembly">
          <div class="title">
            产品
            <span>（对应ERP数据名称:组合件）</span>
          </div>
          <div class="table">
            <el-table :data="tableData2" :border="true" height="100%">
              <!--产品型号-->
              <el-table-column show-overflow-tooltip prop="model" label="产品型号" width="180" />

              <!--产品名称-->
              <el-table-column show-overflow-tooltip prop="name" label="产品名称" />

              <!--产品规格-->
              <el-table-column show-overflow-tooltip label="产品规格">
                <template #default="scope">
                  <el-select v-model="scope.row.spec" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in specList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>

              <!--产品分类-->
              <el-table-column show-overflow-tooltip prop="type" label="产品分类" />

              <!--产品品牌-->
              <el-table-column show-overflow-tooltip prop="brand" label="产品品牌" />

              <!--单位-->
              <el-table-column show-overflow-tooltip prop="unit" label="单位" />

              <!--备注-->
              <el-table-column show-overflow-tooltip prop="notes" label="备注">
                <template #default="item">
                  <el-input v-model.trim="item.row.notes" placeholder="请输入" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="child">
          <div class="title">
            BOM清单
            <span>（对应ERP数据名称:子件）</span>
          </div>
          <div class="table">
            <el-table :data="selfData" :border="true" class="bom_list_tabs" height="100%">
              <!--序号-->
              <el-table-column label="序号" width="50" type="index" fixed :align="'center'" />

              <!-- 操作 -->
              <el-table-column fixed="right" label="操作" width="100" :align="'left'">
                <template #default="scope">
                  <el-space :size="0" :spacer="spacer">
                    <h-link
                      v-if="selfData.length > 1"
                      type="error"
                      @click="deleteLineData(scope.$index, scope.row.id)"
                      >删除</h-link
                    >
                    <h-link v-if="scope.$index === 0" @click="addLineData">添加</h-link>
                  </el-space>
                </template>
              </el-table-column>

              <!--产品类型-->
              <el-table-column prop="class" label="产品类型" width="100" show-overflow-tooltip>
                <template #default="item">
                  <el-select
                    v-model="item.row.class"
                    placeholder="请选择成品/产品"
                    clearable
                    :disabled="getGoodType() === 'spare'"
                  >
                    <el-option label="成品" value="1" />
                    <el-option label="产品" value="2" />
                  </el-select>
                </template>
              </el-table-column>

              <!--产品型号-->
              <el-table-column prop="model" label="产品型号" show-overflow-tooltip width="150">
                <template #default="item">
                  <el-input
                    v-model.trim="item.row.model"
                    clearable
                    placeholder="产品型号"
                    :disabled="item.row.class == ''"
                  >
                    <template #suffix>
                      <el-icon
                        v-if="item.row.class != ''"
                        class="el-input__icon"
                        @click="getContPro(item.row.class, item.$index)"
                      >
                        <MoreFilled />
                      </el-icon> </template
                  ></el-input>
                </template>
              </el-table-column>

              <!--产品名称-->
              <el-table-column prop="name" label="产品名称" show-overflow-tooltip width="150" />

              <!--产品品牌-->
              <el-table-column prop="brand" label="产品品牌" show-overflow-tooltip width="150" />

              <!--产品编号-->
              <el-table-column prop="code" label="产品编号" show-overflow-tooltip width="150" />

              <!--产品分类-->
              <el-table-column prop="type" label="产品分类" show-overflow-tooltip width="150" />

              <!--产品规格-->
              <el-table-column prop="specName" label="产品规格" show-overflow-tooltip width="150" />

              <!--SKU条码-->
              <el-table-column prop="specCode" label="SKU条码" show-overflow-tooltip width="150" />
              <el-table-column prop="num" show-overflow-tooltip width="100">
                <template #header>
                  数量
                  <el-popover placement="top-start" :width="160" trigger="hover">
                    <h5 style="margin-bottom: 10px">批量填充数量</h5>
                    <el-input
                      v-model.trim="num"
                      placeholder="请输入"
                      clearable
                      @keyup.enter="changeNumber"
                    />
                    <div style="display: flex; justify-content: end; margin-top: 10px">
                      <HButton type="primary" :height="20" :padding-lr="6" @click="changeNumber"
                        >确定</HButton
                      >
                    </div>
                    <template #reference>
                      <span class="multiple_btn">批量</span>
                    </template>
                  </el-popover>
                </template>
                <template #default="item">
                  <el-input v-model.trim="item.row.num" placeholder="请输入" clearable />
                </template>
              </el-table-column>

              <!--单位-->
              <el-table-column prop="unit" label="单位" show-overflow-tooltip width="100" />

              <!--图片-->
              <el-table-column prop="image" label="图片" width="80">
                <template #default="scope">
                  <h-image
                    :src="scope.row.image || defaultImage"
                    :padding="2"
                    :width="40"
                    :height="25"
                    :show-del-btn="false"
                    :show-mask="!!scope.row.image"
                  />
                </template>
              </el-table-column>

              <!--备注-->
              <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip>
                <template #default="item">
                  <el-input v-model.trim="item.row.remark" placeholder="请输入" clearable />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!--分页-->
        <div v-if="boomId" class="pagination">
          <Pagination
            ref="pagination"
            :list_total="selfData.length"
            @size-change="getChildList"
            @current-change="getChildList(false)"
          />
        </div>
      </div>

      <template #footer>
        <HButton type="primary" is-modal @click="saveBOM" @focus="btnCancelFocus">保存</HButton>
        <HButton is-modal @click="bomDialog = false" @focus="btnCancelFocus">取消</HButton>
      </template>
    </h-drawer>

    <!-- 关联产品弹窗 -->
    <h-drawer v-model="relevanceDialog" title="关联产品" :width="1000" unit="px">
      <div v-loading="dataLoading" element-loading-text="加载中..." class="connect_commodity_modal">
        <div class="header">
          <el-input
            v-model.trim="input5"
            clearable
            placeholder="关键字"
            :title="input5"
            @keyup.enter="getContData"
            @clear="getContData"
          />
          <HButton type="primary" @click="getContData">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </HButton>
          <HButton @click=";(input5 = ''), getContData()">
            <el-icon>
              <RefreshRight />
            </el-icon>
            重置
          </HButton>
        </div>
        <div class="table">
          <el-table :data="contData" :border="true" height="100%" @selection-change="handleChange">
            <template #empty>
              <el-empty></el-empty>
            </template>
            <el-table-column type="selection" fixed width="40" />
            <el-table-column label="序号" width="50" fixed type="index" :align="'center'" />
            <el-table-column show-overflow-tooltip prop="class" label="产品类型" width="100">
              <template #default="scope">
                <span>{{ scope.row.class == 1 ? '成品' : '产品' }} </span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="brand" width="150">
              <template #header>
                品牌
                <el-popover placement="bottom" :width="250" trigger="click">
                  <template #reference>
                    <span class="iconfont icon-shaixuan"></span>
                  </template>
                  <div class="pro-selete">
                    <el-select
                      v-model="brand"
                      placeholder="请选择"
                      clearable
                      class="pro-selete"
                      @change="getContData"
                    >
                      <el-option
                        v-for="item in brandOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="type" width="150">
              <template #header>
                产品分类
                <el-popover placement="bottom" :width="250" trigger="click">
                  <template #reference>
                    <span class="iconfont icon-shaixuan"></span>
                  </template>
                  <div class="pro-selete">
                    <el-select
                      v-model="type"
                      placeholder="请选择"
                      clearable
                      class="pro-selete"
                      @change="getContData"
                    >
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="model" label="产品型号" width="150" />
            <el-table-column show-overflow-tooltip prop="name" label="产品名称" width="150" />
            <el-table-column show-overflow-tooltip prop="code" label="产品编号" width="150" />
            <el-table-column show-overflow-tooltip prop="specName" label="产品规格" width="150" />
            <el-table-column show-overflow-tooltip prop="specCode" label="SKU条码" width="150" />
            <el-table-column show-overflow-tooltip prop="unit" label="单位" width="150" />
            <el-table-column prop="image" label="图片" width="70">
              <template #default="scope">
                <h-image
                  :width="40"
                  :height="25"
                  :src="scope.row.image || defaultImg"
                  :show-del-btn="false"
                  :padding="2"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="pagination2"
            :list_total="typeTotal2"
            @size-change="getContData"
            @current-change="getContData(false)"
          />
        </div>
      </div>

      <template #footer>
        <!-- <HButton type="primary" is-modal @click="saveBtn"> 选中 </HButton> -->
        <HButton type="primary" is-modal @click="closeSelect"> 选中并关闭 </HButton>
        <HButton is-modal @click="relevanceDialog = false"> 关闭 </HButton>
      </template>
    </h-drawer>

    <h-dialog v-model="pdfPreviewDialogVisible" title="附件预览" @close="onHidePdfPreviewDialog">
      <div class="pdf_preview_dialog">
        <h-button type="primary" @click="onShowPrePdf">
          <el-icon>
            <ArrowLeftBold />
          </el-icon>
        </h-button>
        <iframe
          width="700"
          height="500"
          :src="pdfPreviews[currentPreviewPdfIndex].optValue"
          frameborder="0"
        ></iframe>
        <h-button type="primary" @click="onShowNextPdf">
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </h-button>
      </div>
    </h-dialog>

    <h-dialog
      v-model="videoPreviewDialogVisible"
      title="视频预览"
      @close="onHideVideoPreviewDialog"
    >
      <div class="pdf_preview_dialog">
        <h-button type="primary" @click="onShowPreVideo">
          <el-icon>
            <ArrowLeftBold />
          </el-icon>
        </h-button>
        <video
          width="700"
          height="400"
          :src="videoPreviews[currentPreviewVideoIndex].optValue"
          controls
        ></video>
        <h-button type="primary" @click="onShowNextVideo">
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </h-button>
      </div>
    </h-dialog>

    <service-modality-connect-modal
      v-model:visible="serviceModalityConnectModalVisible"
      :product-ids="[route.params.id as string || '']"
      :default-select-id-list="detailServiceModalityIdList"
      @update="getGoodDetail"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, CSSProperties, h } from 'vue'
  import { ElDivider, ElMessage, ElMessageBox } from 'element-plus'
  import type { TabPaneName, TabsPaneContext } from 'element-plus'
  import { useRouter, useRoute } from 'vue-router'
  import Pagination from '@/components/Pagination/index.vue'
  import { MoreFilled, Search, Picture as IconPicture, RefreshRight } from '@element-plus/icons-vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { useSettingStore } from '@/store/modules/setting'
  import {
    productDisable,
    SpareDisable,
    productDelete,
    SpareDelete,
    getProductDetail,
    getProductSpec,
    getInsList,
    getVideoList,
    getIntroduce,
    getProductParam,
    getSpareDetail,
    getSpareSpec,
    getSparePara,
    getSpareIntroduce,
    getGoodsBoomList,
    brandPageSelect,
    typePageSelect,
    getSpareBoomList,
    saveGoodsBoom,
    getProductBoom,
    getProductBoomDetail,
    getProductBoomChildList,
  } from '@/api/goodsInfo'
  import defaultImage from '@/assets/image/default.png'
  import { GoodDetail, GoodSpec } from './types'
  import { useGoodType } from '../../services'
  import pdfImg from '@/assets/image/pdf.png'
  import videoImg from '@/assets/image/pages/order/new/video.png'
  import defaultImg from '@/assets/image/default.png'
  import Editor from '@/components/business/editor/Editor.vue'
  import routeComponentName from '@/config/route-component-name'
  import ServiceModalityConnectModal from '@/components/pages/good/ServiceModalityConnectModal.vue'
  import { useGetSpareBomList } from '@/services/pages/good/useGood'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const {
    list: spareBomList,
    getListLoading: getSpareBomListLoading,
    getList: getSpareBomList,
  } = useGetSpareBomList()
  const { getGoodType } = useGoodType()

  defineOptions({
    name: routeComponentName.good.goodDetail,
  })

  // 编辑器组件实例
  const editorRef = ref<InstanceType<typeof Editor> | null>(null)

  // 服务形式关联弹窗显示状态
  const serviceModalityConnectModalVisible = ref(false)

  // 详情的服务形式id集合
  const detailServiceModalityIdList = ref<Array<string>>([])

  const pdfPreviewDialogVisible = ref(false)
  const currentPreviewPdfIndex = ref(0)
  const pdfPreviews = ref<Array<{ id: string; optValue: string }>>([])

  const onShowPdfPreviewDialog = (
    pdfList: Array<{ id: string; optValue: string }>,
    index: number,
  ) => {
    currentPreviewPdfIndex.value = index
    pdfPreviews.value = pdfList
    pdfPreviewDialogVisible.value = true
  }
  const onHidePdfPreviewDialog = () => {
    pdfPreviewDialogVisible.value = false
    currentPreviewPdfIndex.value = 0
    pdfPreviews.value = []
  }
  const onShowNextPdf = () => {
    ++currentPreviewPdfIndex.value
    if (currentPreviewPdfIndex.value > 10) {
      currentPreviewPdfIndex.value = 0
    }
  }
  const onShowPrePdf = () => {
    --currentPreviewPdfIndex.value
    if (currentPreviewPdfIndex.value < 0) {
      currentPreviewPdfIndex.value = pdfPreviews.value.length - 1
    }
  }

  const videoPreviewDialogVisible = ref(false)
  const currentPreviewVideoIndex = ref(0)
  const videoPreviews = ref<Array<{ id: string; optValue: string }>>([])
  const onShowVideoPreviewDialog = (
    pdfList: Array<{ id: string; optValue: string }>,
    index: number,
  ) => {
    currentPreviewVideoIndex.value = index
    videoPreviews.value = pdfList
    videoPreviewDialogVisible.value = true
  }
  const onHideVideoPreviewDialog = () => {
    videoPreviewDialogVisible.value = false
    currentPreviewVideoIndex.value = 0
    videoPreviews.value = []
  }
  const onShowNextVideo = () => {
    ++currentPreviewVideoIndex.value
    if (currentPreviewVideoIndex.value > 10) {
      currentPreviewVideoIndex.value = 0
    }
  }
  const onShowPreVideo = () => {
    --currentPreviewVideoIndex.value
    if (currentPreviewVideoIndex.value < 0) {
      currentPreviewVideoIndex.value = videoPreviews.value.length - 1
    }
  }

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  const tabsHeaderOptionsStyle = ref<CSSProperties>({
    width: 'calc(100% - 342px)',
  })
  const handleTabsChange = (name: TabPaneName) => {
    switch (name) {
      case 'first':
        tabsHeaderOptionsStyle.value.width = `calc(100% - 342px)`
        break
      case 'fourth':
      case 'fifth':
        tabsHeaderOptionsStyle.value.width = 'calc(100% - 208px)'
        break
    }
  }

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }
  const indexMethod1 = (index: number) => {
    return (index + 1) * 1
  }
  const indexMethod2 = (index: number) => {
    return (index + 1) * 1
  }
  const indexMethod3 = (index: number) => {
    return (index + 1) * 1
  }
  const indexMethod4 = (index: number) => {
    return (index + 1) * 1
  }
  const indexMethod5 = (index: number) => {
    return (index + 1) * 1
  }

  const TagsViewStore = useTagsViewStore()
  const router = useRouter()
  const route = useRoute()
  const srcList = ref([])
  const activeName = ref('first')
  const input5 = ref('') // 关键字
  const bomDialog = ref(false)
  const relevanceDialog = ref(false)
  const tableData = ref([])
  const tableData2 = []
  const selfData = ref([
    {
      class: '1',
      id: null,
      brand: '',
      code: '',
      goodsId: '',
      goodsSpecId: '',
      model: '',
      name: '',
      num: '1',
      unit: '',
      type: '',
      specId: '',
      specName: '',
      specCode: '',
      image: '',
      remark: '',
    },
  ])
  const num = ref('')

  const pagination = ref() // 产品分页Dom

  const pagination2 = ref() // 产品分页Dom
  const typeTotal2 = ref() // 产品总数量

  // 刷新页面
  const refresh = () => {
    useSettingStore().setReload()
  }

  // 选项切换
  const handleClick = async (tab: TabsPaneContext) => {
    loading.value = true
    if (tab.props.name == 'first') {
      await getSpecData()
      loading.value = false
    }
    if (tab.props.name == 'second') {
      await getBomData()
      loading.value = false
    }
    if (tab.props.name == 'third') {
      await getParaData()
      loading.value = false
    }
    if (tab.props.name == 'fourth') {
      // await getInsData()
      loading.value = false
    }
    if (tab.props.name == 'fifth') {
      // await geVideoData()
      loading.value = false
    }
    if (tab.props.name == 'sixth') {
      await getProContent()
      if (editorRef.value) {
        editorRef.value.mountEditor()
      }
      loading.value = false
    } else {
      editorRef.value.destoryEditor()
    }
  }

  // 修改产品
  const editProduct = () => {
    if (getGoodType() === 'product') {
      router.push({ path: '/commodity/commodi/edit/' + route.params.id })
    } else {
      router.push({ path: '/commodity/commodi/editSpare/' + route.params.id })
    }
  }

  const goback = () => {
    refresh()
    TagsViewStore.delView(router.currentRoute.value.path)
    router.push({ path: '/commodity/commodi' })
  }

  // 封装修改状态的方法
  const changeDisable = (type, name, method, arr, status) => {
    if (arr.length == 0) {
      HMessageBox.error(`请选择要${type}的${name}`)
      return
    }
    ElMessageBox({
      type: type === '删除' ? 'error' : 'warning',
      title: '提示',
      message: `确认${type}选中的${name}?`,
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(async () => {
      if (status != '3') {
        // 批量启用/禁用
        await method(arr, status).then((res) => {
          ElMessage({
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 5000,
            plain: true,
            showClose: true,
          })
          if (res.data.code == 20000) {
            getGoodDetail()
          }
        })
      } else {
        // 批量删除
        await method(arr).then((res) => {
          ElMessage({
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 5000,
            plain: true,
            showClose: true,
          })
          if (res.data.code == 20000) {
            goback()
          }
        })
      }
    })
  }

  // 禁用/删除产品
  const changeAll = (n: number) => {
    if (n == 1) {
      if (getGoodType() === 'product') {
        changeDisable('禁用', '产品', productDisable, [route.params.id], true)
      } else {
        changeDisable('禁用', '产品', SpareDisable, [route.params.id], true)
      }
    } else {
      if (getGoodType() === 'product') {
        changeDisable('删除', '产品', productDelete, [route.params.id], '3')
      } else {
        changeDisable('删除', '产品', SpareDelete, [route.params.id], '3')
      }
    }
  }

  const loading = ref(true)
  const proInfo = ref() // 产品信息

  const specList = ref<Array<GoodSpec>>([]) // 规格列表
  const specName = ref('') // 规格名称
  const specSKU = ref('') // 规格SKU码
  const specPage = ref() // 产品规格分页Dom
  const specTotal = ref() // 总数目

  const paramsName = ref('') // 参数名称
  const paramFields = ref([]) // 系统参数列表
  const customParams = ref([]) // 自定义参数列表

  const insName = ref('') // 说明书名称
  const insList = ref([]) // 说明书列表
  const insPage = ref() // 产品规格分页Dom
  const insTotal = ref() // 总数目

  const videoName = ref('') // 视频名称
  const videoList = ref([]) // 视频列表
  const videoPage = ref() // 视频分页Dom
  const videoTotal = ref() // 总数目

  const proContent = ref() // 产品内容简介

  const brand = ref() // 品牌ID
  const brandOptions = ref([]) // 品牌下拉数据

  const type = ref() // 分类ID
  const typeOptions = ref([]) // 分类下拉数据

  const typeName = ref('') // 产品类型
  const bomIndex = ref() // 当前点击

  const contData = ref([]) // 关联的产品数据
  const boomChildVos = ref([]) // 子件列表
  const boomId = ref() // 子件ID
  const delBoomChildIds = ref([]) // 删除Boom子件ID集合

  const bomLoading = ref(false)
  const dataLoading = ref(false)

  // 获取分页数据
  const getPagingData = (obj, name, val) => {
    if (val) {
      obj.setPage()
    }
    return {
      name: name,
      limit: obj.size,
      page: obj.current,
    }
  }

  const getGoodDetail = async () => {
    loading.value = true
    let goodDetail: GoodDetail | null = null
    if (getGoodType() === 'product') {
      const res = await getProductDetail(route.params.id)
      goodDetail = res.data.data.row
    } else {
      const res = await getSpareDetail(route.params.id)
      goodDetail = res.data.data.row
    }
    proInfo.value = goodDetail
    if (goodDetail.images.length != 0) {
      goodDetail.images.forEach((item) => {
        srcList.value.push(item)
      })
    }

    tableData2.push({
      model: goodDetail.model,
      name: goodDetail.name,
      type: goodDetail.type,
      brand: goodDetail.brand,
      unit: goodDetail.unit,
      spec: '',
      notes: '',
      createTime: goodDetail.createTime,
    })
    loading.value = false
    if (goodDetail.moduleRelationVos) {
      detailServiceModalityIdList.value = goodDetail.moduleRelationVos.map((item) => item.moduleId)
    }
  }

  // 获取规格列表
  const getSpecData = async (val = true) => {
    loading.value = true
    if (val) {
      specPage.value.setPage()
    }
    const data = {
      code: specSKU.value,
      limit: specPage.value.size,
      name: specName.value,
      page: specPage.value.current,
    }
    let res
    if (getGoodType() === 'product') {
      res = await getProductSpec(data, route.params.id)
    } else {
      res = await getSpareSpec(data, route.params.id)
    }
    specList.value = res.data.data.rows
    specTotal.value = parseInt(res.data.data.total)
    loading.value = false
  }

  // 获取BOM清单
  const getBomData = async () => {
    if (getGoodType() === 'product') {
      loading.value = true
      const res = await getProductBoom(proInfo.value.id)
      tableData.value = res.data.data.rows
      loading.value = false
      return
    }

    await getSpareBomList(proInfo.value.id)
    tableData.value = spareBomList.value
  }

  // 获取子件数据
  const getChildList = async (val = true) => {
    bomLoading.value = true
    if (val && pagination.value) {
      pagination.value.setPage()
    }
    const data = {
      limit: pagination.value?.size == undefined ? 0 : pagination.value?.size,
      page: pagination.value?.current == undefined ? 0 : pagination.value?.current,
    }
    await getProductBoomChildList(data, boomId.value).then((res) => {
      selfData.value = []
      res.data.data.rows.forEach((item) => {
        selfData.value.push({
          class: String(item.type),
          id: item.id,
          brand: item.brand,
          code: item.code,
          goodsId: item.goodsId,
          goodsSpecId: item.goodsSpecId,
          model: item.model,
          name: item.name,
          num: item.qty,
          unit: item.unit,
          type: item.goodsType,
          specId: item.goodsSpecId,
          specName: item.specName,
          specCode: item.specCode,
          image: item.image,
          remark: item.remark,
        })
      })
      bomLoading.value = false
    })
  }

  // 查看清单详细
  const viewBomDetal = async (id) => {
    loading.value = true
    boomId.value = id
    await getProductBoomDetail(id).then(async (res) => {
      tableData2[0].spec = await res.data.data.row.productSpecId
      tableData2[0].notes = await res.data.data.row.remark
    })
    getChildList()
    loading.value = false
    bomDialog.value = true
  }

  // 将JSON转为字符串
  const getString = (str) => {
    if (str?.startsWith(`[`) == true) {
      if (JSON.parse(str).length <= 1) {
        if (JSON.parse(str)[0] instanceof Array) {
          return JSON.parse(str)[0].join()
        } else {
          return JSON.parse(str)[0]
        }
      } else {
        return JSON.parse(str).join()
      }
    } else {
      return str
    }
  }

  // 获取参数列表
  const getParaData = async () => {
    loading.value = true
    if (getGoodType() === 'product') {
      const res = await getProductParam(route.params.id)
      paramsName.value = res.data.data.row.name
      paramFields.value = res.data.data.row.paramFields
      if (paramFields.value) {
        paramFields.value.forEach((item) => {
          item.val = getString(item.val)
        })
      }
      customParams.value = res.data.data.row.customParams
      loading.value = false
    } else {
      const res = await getSparePara(route.params.id)
      paramsName.value = res.data.data.row.name
      paramFields.value = res.data.data.row.paramFields
      if (paramFields.value) {
        paramFields.value.forEach((item) => {
          item.val = getString(item.val)
        })
      }
      customParams.value = res.data.data.row.customParams
      loading.value = false
    }
  }

  // 获取说明书列表
  const getInsData = async (val = true) => {
    loading.value = true
    await getInsList(getPagingData(insPage.value, insName.value, val), route.params.id).then(
      (res) => {
        insList.value = res.data.data.rows
        insTotal.value = parseInt(res.data.data.total)
        loading.value = false
      },
    )
  }

  // 获取视频列表
  const geVideoData = async (val = true) => {
    loading.value = true
    await getVideoList(getPagingData(videoPage.value, videoName.value, val), route.params.id).then(
      (res) => {
        videoList.value = res.data.data.rows
        videoTotal.value = parseInt(res.data.data.total)
        loading.value = false
      },
    )
  }

  // 获取产品内容简介
  const getProContent = async () => {
    loading.value = true
    if (getGoodType() === 'product') {
      await getIntroduce(route.params.id).then((res) => {
        proContent.value = res.data.data.row
        loading.value = false
      })
    } else {
      await getSpareIntroduce(route.params.id).then((res) => {
        proContent.value = res.data.data.row
        loading.value = false
      })
    }
  }

  // 新增BOM关联
  const addBOM = () => {
    bomDialog.value = true
    selfData.value = [
      {
        class: '1',
        id: null,
        brand: '',
        code: '',
        goodsId: '',
        goodsSpecId: '',
        model: '',
        name: '',
        num: '1',
        unit: '',
        type: '',
        specId: '',
        specName: '',
        specCode: '',
        image: '',
        remark: '',
      },
    ]
  }

  // 删除子件
  const deleteLineData = (index, id) => {
    if (selfData.value.length <= 1) {
      return false
    }
    selfData.value = selfData.value.filter((o, i) => i != index)
    selecttion.value = selecttion.value.filter((o, i) => i != index)
    delBoomChildIds.value.push(id)
  }

  // 添加子件
  const addLineData = () => {
    selfData.value.push({
      class: getGoodType() === 'spare' ? '2' : '1',
      id: null,
      brand: '',
      code: '',
      goodsId: '',
      goodsSpecId: '',
      model: '',
      name: '',
      num: '1',
      unit: '',
      type: '',
      specId: '',
      specName: '',
      specCode: '',
      image: '',
      remark: '',
    })
  }

  // 获取关联产品
  const getContPro = (name, i) => {
    typeName.value = name
    bomIndex.value = i
    selecttion.value = []
    brand.value = ''
    type.value = ''
    input5.value = ''
    relevanceDialog.value = true
    const seletc = {
      limit: 0,
      name: '',
      page: 0,
    }
    brandPageSelect(seletc).then((res) => {
      brandOptions.value = res.data.data.rows
    })
    typePageSelect(seletc).then((res) => {
      typeOptions.value = res.data.data.rows
    })
    getContData()
  }

  // 获取列表数据
  const getContData = (val = true) => {
    dataLoading.value = true
    if (val && pagination2.value) {
      pagination2.value.setPage()
    }
    const data = {
      branId: brand.value == undefined ? '' : brand.value,
      keyword: input5.value,
      limit: pagination2.value?.size == undefined ? 0 : pagination2.value?.size,
      page: pagination2.value?.current == undefined ? 0 : pagination2.value?.current,
      typeId: type.value == undefined ? '' : type.value,
    }
    contData.value = []
    if (typeName.value == '1') {
      getGoodsBoomList(data, proInfo.value.id).then((res) => {
        res.data.data.rows.forEach((item) => {
          if (contData.value.includes(item) == false) {
            contData.value.push({
              class: typeName.value,
              id: item.id,
              brand: item.brand,
              code: item.code,
              model: item.model,
              name: item.name,
              num: '1',
              unit: item.unit,
              type: item.type,
              specId: item.specId,
              specName: item.specName,
              specCode: item.specCode,
              image: item.image,
            })
          }
        })
        typeTotal2.value = parseInt(res.data.data.total)
        dataLoading.value = false
      })
    } else {
      getSpareBoomList(data).then((res) => {
        res.data.data.rows.forEach((item) => {
          if (contData.value.includes(item) == false) {
            contData.value.push({
              class: typeName.value,
              id: item.id,
              brand: item.brand,
              code: item.code,
              model: item.model,
              name: item.name,
              unit: item.unit,
              type: item.type,
              specId: item.specId,
              specName: item.specName,
              specCode: item.specCode,
              image: item.image,
            })
          }
        })
        typeTotal2.value = parseInt(res.data.data.total)
        dataLoading.value = false
      })
    }
  }

  // 选中关闭
  const closeSelect = () => {
    saveBtn(1)
  }

  // 选中保存
  const saveBtn = (n) => {
    if (selecttion.value.length == 0) {
      HMessageBox.error('请选择要关联的数据')
      return
    }
    if (selecttion.value.length == 1) {
      selecttion.value.forEach((item) => {
        if (selfData.value.includes(item) == false) {
          selfData.value[bomIndex.value] = {
            class: typeName.value,
            id: null,
            brand: item.brand,
            code: item.code,
            goodsId: item.id,
            goodsSpecId: item.specId,
            model: item.model,
            name: item.name,
            num: '1',
            unit: item.unit,
            type: item.type,
            specId: item.specId,
            specName: item.specName,
            specCode: item.specCode,
            image: item.image,
            remark: '',
          }
        }
      })
    } else {
      selfData.value.splice(bomIndex.value, 1)
      selecttion.value.forEach((item) => {
        selfData.value.push({
          class: typeName.value,
          id: null,
          brand: item.brand,
          code: item.code,
          goodsId: item.id,
          goodsSpecId: item.specId,
          model: item.model,
          name: item.name,
          num: '1',
          unit: item.unit,
          type: item.type,
          specId: item.specId,
          specName: item.specName,
          specCode: item.specCode,
          image: item.image,
          remark: '',
        })
      })
    }
    if (n == 1) {
      relevanceDialog.value = false
    }
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val) => {
    if (val.length != 0) {
      val.forEach((item) => {
        if (selecttion.value.indexOf(item) == -1) {
          selecttion.value.push(item)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 批量填充数量
  const changeNumber = () => {
    if (num.value) {
      selfData.value.forEach((item) => {
        item.num = num.value
      })
    }
  }

  // 保存BOM关联
  const saveBOM = () => {
    bomLoading.value = true
    boomChildVos.value = []
    selfData.value.forEach((item) => {
      boomChildVos.value.push({
        id: item.id == undefined ? null : item.id,
        goodsId: item.goodsId,
        goodsSpecId: item.goodsSpecId,
        qty: item.num,
        remark: item.remark,
        type: item.class,
      })
    })
    const data = {
      boomChildVos: boomChildVos.value,
      delBoomChildIds: delBoomChildIds.value,
      id: boomId.value == undefined ? null : boomId.value,
      productId: proInfo.value.id,
      productSpecId: tableData2[0].spec,
      remark: tableData2[0].notes,
      goodsType: getGoodType() === 'product' ? 1 : 2,
    }
    saveGoodsBoom(data).then((res) => {
      if (res.data.success == true) {
        HMessage.success('关联成功')
        bomDialog.value = false
        bomLoading.value = false
        boomId.value = ''
        if (activeName.value === 'second') {
          getBomData()
        }
      } else {
        HMessageBox.error(res.data.message)
        bomLoading.value = false
        return
      }
    })
  }

  // 按钮取消聚焦
  const btnCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }

  onMounted(() => {
    getGoodDetail()
    getSpecData()
  })
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
